<script setup lang="ts">
import { isNullOrUndefined } from '@vc/utils';
import LinkStatus from '@/components/menu-item/status.vue';
import { DIR_INDEX_NAME } from '../constants';

interface Props {
  list: Array<any>;
  isDir?: boolean
  showDisable?: boolean
  parentId?: number | string
}

const {
  list,
  isDir = false,
  parentId = '',
  showDisable
} = defineProps<Props>();

const emit = defineEmits(['click']);

const handeleItemClick = (item) => {
  emit('click', item);
};
</script>

<template>
  <template v-for="(item) in list" :key="isDir ? parentId + DIR_INDEX_NAME + item.id : item.id">
    <vc-menu-item
      @click="() => handeleItemClick(item)"
      className="item"
      :index="isDir ? parentId + DIR_INDEX_NAME + item.id : item.id"
      :disabled="item.status === 1"
      :route="`#${item?.name}`"
      v-if="showDisable ? showDisable : item.status === 0"
    >
      <b :class="['item-con', {'disable': item.status === 1}]">
        <b class="text"> {{ item?.name }}</b>
        <b v-if="!isNullOrUndefined(item?.count)" class="count">{{ item?.count }}</b>
        <link-status
          v-if="item?.functionLabel"
          :color="item?.functionLabel?.color"
          :bgColor="item?.functionLabel?.bgColor"
          :name="item?.functionLabel?.name"
        />
      </b>
    </vc-menu-item>
  </template>
</template>
